<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

//导入获取用户信息的api
import { getUserIfo, userUpdateInfoService } from '@/api/user.js'

// 更新用户信息的按钮
const formModel = ref({
  id: '',
  username: '',
  nickname: '',
  email: ''
})

// 导入仓库
import { useUserStore } from '@/stores'
const userStore = useUserStore()

const loading = ref(true) //加载中 ---- 组件
// 渲染用户信息 renderInfo 
const renderInfo = async () => {
  //渲染此二级路由默认的信息
  const res = await getUserIfo()
  formModel.value = res.data.data 
  loading.value = false
  // 使用仓库调用 API 方法 渲染 上面框架的用户名字
  userStore.getUser()
}
renderInfo()

// 配置规则
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 5, max: 10, message: '用户名必须是5-10位的字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入用户邮箱', trigger: 'blur' },
    {
      pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
      message: '请输入正确的邮箱地址',
      trigger: 'blur'
    }
  ]
}

// 提交修改的按钮
const submitInf = async () => {
  const res = await userUpdateInfoService(formModel.value)
  // console.log(res)
  ElMessage.success('修改成功')
  renderInfo()
}
</script>
<template>
  <PageContainer title="基本资料" v-loading="loading">
    <el-form :model="formModel" :rules="rules">
      <el-form-item label="登录名称">
        <el-input
          style="width: 719px; padding: 1px 15px"
          :prefix-icon="User"
          v-model="formModel.username"
          :disabled="formModel.username"
        ></el-input>
      </el-form-item>
      <el-form-item label="用户昵称" prop="username">
        <el-input
          style="width: 719px; padding: 1px 15px"
          :prefix-icon="User"
          v-model="formModel.nickname"
        ></el-input>
      </el-form-item>
      <el-form-item label="用户邮箱" prop="email">
        <el-input
          style="width: 719px; padding: 1px 15px"
          :prefix-icon="User"
          v-model="formModel.email"
        ></el-input>
      </el-form-item>
      <el-form-item style="margin-left: 100px">
        <el-button class="submit" size="large" type="primary" @click="submitInf"
          >提交修改</el-button
        >
      </el-form-item>
    </el-form>
  </PageContainer>
</template>

<style scoped lang="scss"></style>
